<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>网站后台数据表</title>
  <link rel="stylesheet" href="../步入javascript/icon/iconfont.css">
  <link rel="stylesheet" href="网站后台数据表.css" />
</head>

<body>
<h1>网站后台数据表表</h1>
<form class="info" autocomplete="off">
  <input type="text" class="uname" name="uname" placeholder="账户" />
  <input type="text" class="age" name="age" placeholder="密码" />
  <input type="text" class="salary" name="salary" placeholder="手机号" />
  <button class="add">
    <i class="iconfont icon-tianjia"></i>添加
  </button>
</form>

<div class="title">共有数据<span>0</span>条</div>
<table>
  <thead>
  <tr>
    <th>账户</th>
    <th>密码</th>
    <th>手机号</th>
    <th>录入时间</th>
    <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <!-- <tr>
    <td>1</td>
    <td>迪丽热巴</td>
    <td>23</td>
    <td>女</td>
    <td>12000</td>
    <td>北京</td>
    <td>2099/9/9 08:08:08</td>
    <td>
      <a href="javascript:">
        <i class="iconfont icon-shanchu"></i>
        删除
      </a>
    </td>
  </tr> -->
  </tbody>
</table>
<script>
  // 参考数据
  const initData = [
    {
      stuId: 1,
      uname: '迪丽热巴',
      age: 22,
      salary: '12000',
      gender: '女',
      city: '北京',
      time: '2099/9/9 08:08:08'
    }
  ]
  // localStorage.setItem('data', JSON.stringify(initData))
  // 1. 渲染业务
  // 1.1 先读取本地存储的数据
  // (1). 本地存储有数据则记得转换为对象然后存储到变量里面，后期用于渲染页面
  // (2). 如果没有数据，则用 空数组来代替
  const arr = JSON.parse(localStorage.getItem('data-login')) || []
  console.log(arr[0].salary)
  // 1.2 利用map和join方法来渲染页面
  const tbody = document.querySelector('tbody')
  function render() {
    // (1). 利用map遍历数组，返回对应tr的数组
    const trArr = arr.map(function (ele,index) {
      return `
          <tr>

            <td>${ele.username}</td>
            <td>${ele.password}</td>
            <td>${ele.phone}</td>
            <td>${ele.time}</td>
            <td>
              <a href="javascript:" data-id="${index}">
                <i class="iconfont icon-shanchu"></i>
                删除
              </a>
            </td>
          </tr>
        `
    })

    // (2). 把数组转换为字符串 join
    // (3). 把生成的字符串追加给tbody
    tbody.innerHTML = trArr.join('')
    // 显示共计有几条数据
    document.querySelector('.title span').innerHTML = arr.length
  }
  render()

  // 2. 新增业务
  const info = document.querySelector('.info')
  const uname = document.querySelector('.uname')
  const age = document.querySelector('.age')
  const salary = document.querySelector('.salary')

  // 2.1 form表单注册提交事件，阻止默认行为
  info.addEventListener('submit', function (e) {
    e.preventDefault()
    // 2.2 非空判断
    if (!uname.value || !age.value || !salary.value) {
      return alert('输入内容不能为空')
    }
    // 2.3 给 arr 数组追加对象，里面存储 表单获取过来的数据
    arr.push({
      // 处理 stuId：数组最后一条数据的stuId + 1
      username: uname.value,
      password: age.value,
      phone: salary.value,
      time: new Date().toLocaleString()
    })
    // 2.4 渲染页面和重置表单（reset()方法）
    render()
    this.reset() // 重置表单

    // 2.5 把数组重新存入本地存储里面，记得转换为JSON字符串存储
    localStorage.setItem('data-login', JSON.stringify(arr))
  })

  // 3. 删除业务
  // 3.1 采用事件委托形式，给 tbody 注册点击事件
  tbody.addEventListener('click', function (e) {
    // 判断是否点击的是删除按钮  A 链接
    if (e.target.tagName === 'A') {
      // alert(11)
      // 3.2 得到当前点击链接的索引号。渲染数据的时候，动态给a链接添加自定义属性例如 data-id="0"
      console.log(e.target.dataset.id)

      // 确认框 确认是否要真的删除
      if (confirm('您确定要删除这条数据吗？')) {
        // 3.3 根据索引号，利用 splice 删除数组这条数据
        arr.splice(e.target.dataset.id, 1)
        // 3.4 重新渲染页面
        render()
        // 3.5 把最新 arr 数组存入本地存储
        localStorage.setItem('data-login', JSON.stringify(arr))
      }
    }
  })
</script>
</body>

</html>